// view/index/mingpian/mingpian.js
let app = getApp()
let yuming = app.globalData.yuming
const request = require('../../config/request');
var avatarUrl = ''
Page({
  /**
   * 页面的初始数据
   */
  ...request,
  data: {
    yuming: yuming,
    heights: "",
    title: '电子名片',
    hideshare: false,
    bgImgPath: '',
    erwei: '', //二维码
    shop: '', //信息
    avatarUrls: '',
    QRimages: '',
    aaa: 1
  },
  showshare: function () {
    var that = this;
    that.downLoad()
  },
  downLoad: function (e) {
    var that = this;
    wx.showLoading({
      title: '正在生成图片',
    })
    //头像
    wx.downloadFile({
      url: that.data.shop.shopLogo,
      success: function (res3) {
        that.setData({
          avatarUrls: res3.tempFilePath
        })
        // 小背景图
        wx.downloadFile({
          url: yuming + "static/applet/images/sss/my/lll.png",
          success: function (res3) {
            that.setData({
              xiaobei: res3.tempFilePath
            })
            // 商户电子名片
            wx.downloadFile({
              url: yuming + "static/applet/images/sss/my/dianzmpz.png",
              success: function (res3) {
                that.setData({
                  shdzmp: res3.tempFilePath
                })
                // 手机号
                wx.downloadFile({
                  url: yuming + "static/applet/images/sss/my/shou.png",
                  success: function (res3) {
                    that.setData({
                      shouji: res3.tempFilePath
                    })
                    // 位置
                    wx.downloadFile({
                      url: yuming + "static/applet/images/sss/my/wei.png",
                      success: function (res3) {
                        that.setData({
                          weizhi: res3.tempFilePath
                        })
                        // 小程序码
                        wx.downloadFile({
                          url: that.data.erwei,
                          success: function (res3) {
                            that.setData({
                              QRimages: res3.tempFilePath
                            })
                            that.drawimg();
                            wx.hideLoading()
                          }
                        })
                      }
                    })
                  }
                })
              }
            })
          }
        })
      }
    })

  },
  drawimg: function () {
    var that = this;
    const ctx = wx.createCanvasContext('myCanvas' + that.data.aaa);
    var nickName = that.data.shop.shopName; //昵称
    var phone = that.data.shop.mobile; //手机号
    var dizhi = that.data.shop.shopAddress; //地址
    var bgImgPath = that.data.xiaobei; //封面大图
    var xcxcode = that.data.erwei; //二维码

    // 绘制海报背景图片圆角
    let bg_x = 0
    // 图片的y坐标
    let bg_y = 0
    // 图片宽度
    let bg_w = 345
    // 图片高度
    let bg_h = 500
    // 图片圆角
    let bg_r = 10
    ctx.restore()
    ctx.save()
    ctx.beginPath()
    ctx.arc(bg_x + bg_r, bg_y + bg_r, bg_r, Math.PI, Math.PI * 1.5)
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
    ctx.arc(bg_x + bg_w - bg_r, bg_y + bg_h - bg_r, bg_r, 0, Math.PI * 0.5)
    ctx.arc(bg_x + bg_r, bg_y + bg_h - bg_r, bg_r, Math.PI * 0.5, Math.PI)
    ctx.clip()
    ctx.drawImage(bgImgPath, bg_x, bg_y, bg_w, bg_h)
    //绘制商户电子名片文字
    ctx.drawImage(that.data.shdzmp, 10, 10, bg_w - 20, 90)
    // 白色背景
    let a_x = 10;
    let a_y = 90;
    let b_w = 325;
    let b_h = 390
    let c_r = 10
    ctx.restore()
    ctx.save()
    ctx.beginPath()
    ctx.arc(a_x + c_r, a_y + c_r, c_r, Math.PI, Math.PI * 1.5)
    ctx.arc(a_x + b_w - c_r, a_y + c_r, c_r, Math.PI * 1.5, Math.PI * 2)
    ctx.arc(a_x + b_w - c_r, a_y + b_h - c_r, c_r, 0, Math.PI * 0.5)
    ctx.arc(a_x + c_r, a_y + b_h - c_r, c_r, Math.PI * 0.5, Math.PI)
    ctx.clip()
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(a_x, a_y, b_w, b_h);
    ctx.restore()
    // 头像
    var avatarurl_width = 60; //绘制的头像宽度
    var avatarurl_heigth = 60; //绘制的头像高度
    var avatarurl_x = 20; //绘制的头像在画布上的位置
    var avatarurl_y = 110; //绘制的头像在画布上的位置
    ctx.save();
    ctx.beginPath();
    ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
    ctx.clip();
    ctx.drawImage(that.data.avatarUrls, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
    ctx.restore();
    // 字体x位置
    let z_x = 90
    let z_y = 130
    //绘制店铺名
    ctx.setFontSize(18);
    ctx.setFillStyle('#000000');
    ctx.fillText(nickName, z_x, z_y);
    //绘制手机号图标
    ctx.drawImage(that.data.shouji, z_x + 2, 140, 10, 15)
    //绘制手机号
    ctx.setFontSize(14);
    ctx.setFillStyle('#999');
    ctx.fillText(phone, z_x + 20, 152);
    //绘制地址号图标
    ctx.drawImage(that.data.weizhi, z_x + 2, 160, 10, 12)
    //绘制地址
    ctx.setFontSize(14);
    ctx.setFillStyle('#999');
    ctx.fillText(dizhi, z_x + 20, 170);


    //绘制一条虚线
    ctx.strokeStyle = '#f7f7f7';
    ctx.beginPath();
    ctx.setLineWidth(1);
    ctx.setLineDash(0);
    ctx.moveTo(20, 190);
    ctx.lineTo(b_w, 190);
    ctx.stroke();

    //绘制二维码
    ctx.drawImage(that.data.QRimages, 60, 210, 230, 230);
    ctx.draw();
  },
  savetup: function () {
    this.setData({
      hideshare: true
    })
    var that = this;
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas' + that.data.aaa,
        success: function (res) {
          console.log(res.tempFilePath);
          wx.showLoading({
            title: '保存中...',
            mask: true,
          });
          const tempFilePaths = res.tempFilePath
          wx.uploadFile({
            url: yuming + 'Besall/Upload',
            filePath: tempFilePaths,
            name: 'file',
            formData: {

            },
            success(res) {
              var data = JSON.parse(res.data)
              var urls = data.httpUrl + data.imgUrl
              wx.downloadFile({
                url: urls,
                success: function (res) {
                  if (res.statusCode === 200) {
                    that.data.aaa++;
                    that.setData({
                      aaa: that.data.aaa
                    })
                    let img = res.tempFilePath;
                    wx.saveImageToPhotosAlbum({
                      filePath: img,
                      success(res) {
                        wx.showToast({
                          title: '保存成功',
                          icon: 'success'
                        });
                        setTimeout(function () {
                          that.shuju()
                          that.setData({
                            hideshare: false
                          })
                        }, 100)
                      },
                      fail(res) {
                        wx.showToast({
                          title: '保存失败',
                          icon: 'none'
                        });
                        setTimeout(function () {
                          that.shuju()
                          that.setData({
                            hideshare: false
                          })
                        }, 100)
                      }
                    });
                  }
                }
              });
            }
          })
        },
        fail: function (res) {
          console.log(res)
        }
      })
    }, 1000)
  },
  backs() {
    wx.navigateBack({
      delta: 0
    })
  },
  // 数据
  shuju() {
    var that = this
    this.myRequest(yuming + 'Besall/findVcardByUs', {
      shopId: wx.getStorageSync('shopId'),
      scene: wx.getStorageSync('shopId'),
      page: 'pages/zhifu/zhifu',
      from: 'Consumer',
      colour: 'black'
    }, 'POST').then(res => {
      that.setData({
        shop: res.data.shop,
        erwei: res.data.QRimage
      })
      that.showshare()
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      heights: wx.getMenuButtonBoundingClientRect().top + 5,
      title: options.title
    })
    this.shuju()
  },
  save() {
    wx.downloadFile({
      url: '',
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res)
            wx.showToast({
              title: "保存成功",
              icon: 'none'
            })
          },
          fail(err) {
            console.log(err)
            wx.showToast({
              title: "保存失败",
              icon: 'none'
            })
          }
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
})